import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import * as actionCteates from '../store/actionCreates'

import {
    ListWrapper,
    ListInfo,
    LoadMore
} from '../style'


class List extends React.Component {

    render() {
        return (
            <div>
                {
                    this.props.list.map((item, index) => {
                        return (
                            <Link to={'/detail/' + item.get('id')} key={index}>
                                <ListWrapper >
                                    <img alt='' className='pic' src={item.get('imgUrl')} />
                                    <ListInfo>
                                        <h3 className='title'>{item.get('title')}</h3>
                                        <p className='desc'>{item.get('desc')}</p>
                                    </ListInfo>
                                </ListWrapper>
                            </Link>
                        )
                    })
                }
                <LoadMore onClick={(page) => this.props.getMoreList(this.props.page)}>阅读更多</LoadMore>
            </div>
        )
    }
}
const mapState = (state) => ({
    list: state.getIn(['home', 'articleList']),
    page: state.getIn(['home', 'pageList'])
})

const mapDispatch = (dispatch) => ({
    getMoreList(page) {
        dispatch(actionCteates.getMore(page))
    }
})

export default connect(mapState, mapDispatch)(List)